<template>
  <div class="page">
    <div class="head">
      <h1>{{name}}钱包</h1>
      <router-link class="record-icon" tag="div" :to="`/xrprecords?t=${type}`"></router-link>
    </div>
    <!-- 瑞波 -->
    <div class="panel" v-if="type == 1">
      <h3>充值</h3>
      <p class="tip">请用{{name}}钱包转入下方地址：</p>
      <div class="address" v-clipboard="userInfo.officialAddress" @success="isCopy(1)" @error="isCopy(0)" :key="1">{{ userInfo.officialAddress }}</div>
      <h3>提现</h3>
      <p class="money" @click="money = userInfo.balance">可用余额：{{ userInfo.balance }} xrp</p>
      <h4>提现到：{{ userInfo.myAddress }}</h4>
      <group gutter="5px" label-margin-right="1em">
        <x-input title="提现数量" v-model="money" number placeholder="请输入提现数量"></x-input>
        <x-input title="实际到账" :value="money - userInfo.free >= 0 ? money-userInfo.free : ''" readonly></x-input>
      </group>
      <p class="note">提现费率：{{ userInfo.free }}币/次，工作时间（9：00-22：00）一般2小时内到账。</p>
      <box gap="20px 0">
        <x-button type="primary" @click.native="withdraw()">确认提现</x-button>
      </box>
    </div>
    <!-- 链克 -->
    <div class="panel" v-if="type == 2">
      <h3>充值</h3>
      <p class="tip">请用{{name}}钱包转入下方地址：<i class="qrcode" @click="showQrCode=true"></i></p>
      <div class="address" v-clipboard="userInfo.officialWkcAddress" @success="isCopy(1)" @error="isCopy(0)" :key="1">{{ userInfo.officialWkcAddress }}</div>
      <h3>提现</h3>
      <p class="money" @click="money = userInfo.wkcBalance">可用余额：{{ userInfo.wkcBalance }} wkc</p>
      <h4>提现到：{{ userInfo.wkcAddress }}</h4>
      <group gutter="5px" label-margin-right="1em">
        <x-input title="提现数量" v-model="money" number placeholder="请输入提现数量"></x-input>
        <x-input title="实际到账" :value="money - userInfo.free >= 0 ? money - userInfo.free : ''" readonly></x-input>
      </group>
      <p class="note">提现费率：{{ userInfo.free }}币/次，工作时间（9：00-22：00）一般2小时内到账。</p>
      <box gap="20px 0">
        <x-button type="primary" @click.native="withdraw()">确认提现</x-button>
      </box>
    </div>
    <x-dialog v-model="showQrCode" class="dialog-demo" hide-on-blur>
      <div class="img-box">
        <qrcode :value="userInfo.officialWkcAddress" type="img"></qrcode>
      </div>
      <div @click="showQrCode=false">
        <span class="vux-close"></span>
      </div>
    </x-dialog>
  </div>
</template>

<script>
  import {
    XButton,
    XInput,
    Group,
    Box,
    Cell,
    Qrcode,
    XDialog
  } from "vux";
  export default {
    components: {
      XButton,
      XInput,
      Group,
      Box,
      Cell,
      Qrcode,
      XDialog
    },
    data() {
      return {
        userInfo: {},
        money: null,
        type: null,
        name: '',
        showQrCode: false
      };
    },
    computed: {},
    mounted: function() {
      this.$nextTick(function() {
        this.type = this.$route.query.t
        this.name = this.$route.query.n
        // this.isBind()
        this.getUserInfo();
      });
    },
    methods: {
      getUserInfo() {
        this.$http
          .get(`/game/getRechargeInfo`)
          .then((res) => {
            if (res.code == 200) {
              this.userInfo = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      withdraw() {
        if (this.type == 1 && this.money > this.userInfo.balance) {
          this.$vux.toast.text("您没有这么多余额~");
          return;
        }
        if (this.type == 2 && this.money > this.userInfo.wkcBalance) {
          this.$vux.toast.text("您没有这么多余额~");
          return;
        }
        this.$vux.loading.show({
          text: "处理中"
        });
        this.$http
          .post(`/game/withdraw`, {
            amount: this.money,
            type: this.type
          })
          .then((res) => {
            this.$vux.toast.text(res.msg);
            this.$vux.loading.hide();
            if (res.code == 200) {
              this.money = null;
              this.getUserInfo();
            } else {
              this.$vux.toast.text(res.msg);
            }
          })
          .catch(function(error) {});
      }
    }
  };
</script>

<style lang="scss" scoped>
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .record-icon {
      width: 32px;
      height: 32px;
      background: url() no-repeat 50% 50%;
      background-size: 16px 16px;
    }
  }
  .panel {
    overflow: hidden;
    h2 {
      font-size: 20px;
      padding: 10px 0 20px;
    }
    h3 {
      font-size: 16px;
      color: #e78171;
    }
    .tip {
      font-size: 14px;
      color: #4a4a4a;
      span {
        color: #d20f26;
      }
    }
    .account {
      width: 180px;
      background: #d8d8d8;
      text-align: center;
      font-size: 14px;
      line-height: 1.2;
      padding: 6px 0;
      margin: 5px auto;
      p {
        font-weight: 600;
      }
      span {
        font-size: 10px;
        color: #9b9b9b;
      }
    }
    .address {
      width: 100%;
      background: #d8d8d8;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      padding: 5px 12px;
      word-wrap: break-word;
      margin: 5px 0;
      line-height: 1;
      border-radius: 5px;
    }
    .money {
      font-size: 10px;
      color: #b2b2b2;
    }
    h4 {
      font-size: 14px;
    }
    .note {
      font-size: 10px;
      color: #b2b2b2;
      padding: 4px 12px;
    }
  }
  .img-box {
    padding: 30px 0 10px;
  }
  .qrcode {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url() no-repeat;
    background-size: 100%;
  }
</style>